<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <!-- 中间 -->
    <div class="video-center">
      <div>
        <p id="robotitle" style="font-size:18px;color: #e7e7ea;letter-spacing:1px;"></p>
      </div>
      <div class="center-box1">
        <!-- 转速盘 -->
        <div class="Speed-dial">
          <div id="gauges2" ref="chinaMapChart4" style="width:27%;height:80%; margin-top:8%"></div>
          <div id="gauges" ref="chinaMapChart1" style="width:43%;height:90%; margin-top:1%"></div>
          <div id="gauges3" ref="chinaMapChart3" style="width:27%;height:75%; margin-top:8%"></div>
        </div>
        <div class="right-mode">
          <div class="right-mode1">
            <p>模式</p>
            <p style="color: #5DCBFF;">{{ jqrms }}</p>
          </div>
          <div class="right-mode2">
            <p>方向</p>
            <p style="color: #5DCBFF;">{{ jqrfx }}</p>
          </div>
          <div class="right-mode2">
            <p>位移</p>
            <p style="color: #5DCBFF;">{{ sswy }}</p>
          </div>
          <div class="right-mode2">
            <p>电机</p>
            <p style="color: #5DCBFF;">{{ dj }}</p>
          </div>
          <div class="right-mode2">
            <p>速度</p>
            <p style="color: #5DCBFF;">{{ jqrsd }}</p>
          </div>
          <div class="right-mode2">
            <p>点位</p>
            <p style="color: #5DCBFF;">{{ czbh }},{{ bqbh }}</p>
          </div>
        </div>

        <div style="margin-left:14px;margin-bottom:1%;display: flex;
            justify-content: center;
            align-items: center;">
          <img style="width:90%;" src="../../components/images/line1.png" alt="">
        </div>

        <div class="Mode-selection">
          <p>模式选择</p>
        </div>

        <!-- 五个按钮 -->
        <div class="Operation-button" id="#btn">
          <div class="Operation-buttonBox" @click="jqrmsF('1')">
            <el-button size="	medium" circle @click="selectedTab = 0"></el-button>
            <p>手动模式</p>
          </div>
          <div class="Operation-buttonBox" @click="jqrmsF('0')"  v-hasPermi="['nssc:zyms:view']">
            <el-button @click="selectedTab = 1" size="mini" circle style="
                      background: linear-gradient(227deg, #0F947C, #10DAB2);">
            </el-button>
            <p>自由模式</p>
          </div>
          <div class="Operation-buttonBox" @click="jqrzymsF('3')">
            <el-button size="mini" circle
                       style="
                                                                              background: linear-gradient(227deg, #337F17, #3CA813);">
            </el-button>
            <p>返航</p>
          </div>
          <div class="Operation-buttonBox" @click="jqrzymsF('2')">
            <el-button size="mini" circle style="
                        background: linear-gradient(227deg, #1291b7, #3479c7);">
            </el-button>
            <p>自动</p>
          </div>
          <div class="Operation-buttonBox" @click="zt()">
            <el-button size="mini" circle style="
                       background: linear-gradient(227deg, #B72517, #EA392D);">
            </el-button>
            <p>暂停</p>
          </div>
        </div>
      </div>
      <!-- 手动模式 -->
      <div class="center-box2-1" v-if="selectedTab === 0">
        <div class="right-bottomTitle">
          <p>手动模式</p>
          <span></span>
        </div>
        <div class="right-bottomBox">
          <div class="rightbox1">
            <p contenteditable="true" id="mbwzid" style="
            width: 80px;
            height: 28px;
            line-height: 28px;
            background: #011137 !important;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            color: #cecdcd;
            text-align: center;
            align-items: center;
            justify-content: center;
            -webkit-box-align: center;
            ">1,0</p>
            <span>点位</span>
            <el-button class="btn1" @click="mbwzF()" size="default">目标位置</el-button>
          </div>
          <div class="rightbox2">
            <el-dropdown @command="sdmslb">
              <el-button type="primary" size="min" style="width: 80px;
                                                                                                  height: 30px;background: #0F1A43 !important;
                                                                                                  display: flex;
                                                                                                  justify-content: space-around;
                                                                                                  align-items: center;
                                                                                                  border: 2px solid #54619D;
                                                                                                  border-radius: 10px;
                                                                                                  font-size: 12px;
                                                                                                  font-family: Bahnschrift;
                                                                                                  font-weight: 400;
                                                                                                  color: #C1C1C1;">
                {{ sdmsd }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">0</el-dropdown-item>
                <el-dropdown-item command="1000">1000</el-dropdown-item>
                <el-dropdown-item command="2000">2000</el-dropdown-item>
                <el-dropdown-item command="3000">3000</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>m/min</span>
            <el-button class="btn2" @click="sdmsdF()" size="default">速度设定</el-button>
          </div>
        </div>
        <div class="rightbox3">
          <div class="rightbox3-1">
            <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
            <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
            <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
          </div>
        </div>
      </div>

      <!-- 自由模式 -->
      <div class="center-box2-2" v-if="selectedTab === 1">
        <div class="right-bottomTitle">
          <p>自由模式</p>
          <span></span>
        </div>
        <div class="right-bottomBox1">
          <el-dropdown @command="zymslb">
            <el-button type="primary" size="min" style="width: 80px;
                                                                                                height: 30px;background: #0F1A43 !important;
                                                                                                display: flex;
                                                                                                justify-content: space-around;
                                                                                                align-items: center;
                                                                                                border: 2px solid #54619D;
                                                                                                border-radius: 10px;
                                                                                                font-size: 12px;
                                                                                                font-family: Bahnschrift;
                                                                                                font-weight: 400;
                                                                                                color: #C1C1C1;">
              {{ zymssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0">0</el-dropdown-item>
              <el-dropdown-item command="1000">1000</el-dropdown-item>
              <el-dropdown-item command="2000">2000</el-dropdown-item>
              <el-dropdown-item command="3000">3000</el-dropdown-item>
              <el-dropdown-item command="4000">4000</el-dropdown-item>
              <el-dropdown-item command="5000">5000</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>r/min</span>
          <el-button class="btn" size="default" @click="zymsdsd()">速度设定</el-button>
        </div>
        <div class="right-bottomBox2">
          <div class="rightbox2-1">
            <el-button class="btn1" size="default" @click="zymsqd()">启动</el-button>
            <el-button class="btn2" size="default" @click="zymsqj()">前进</el-button>
            <el-button class="btn3" size="default" @click="zymsht()">后退</el-button>
          </div>
        </div>
      </div>

      <!-- 一键返航 -->
      <div class="center-box2-3" v-if="selectedTab === 2">
        <div class="right-bottomTitle">
          <p>一键返航</p>
          <span></span>
        </div>
        <div class="right-bottomBox">
          <el-button class="btn" size="default" @click="yjfh()">返航</el-button>
        </div>
      </div>
    </div>

    <!-- 右边 -->
    <div class="video-right">
      <div>
        <p style="font-size:18px;color: #e7e7ea;letter-spacing:1px;">视频控制</p>
      </div>
      <!-- 海康摄像头 -->
      <div class="videoBox">
        <div class="videobox1">
          <!-- 监控画面 -->
          <div class="box">
            <video v-show="videoShow" style="width:100%;height:98%"  class="video-js" id="videoHK" controls></video>
          </div>
        </div>
        <!-- 电子轨道地图 -->
        <div class="videobox2">
          <div class="dzdt">
            <p>地图</p>
            <span></span>
          </div>
          <div class="Trd-map1" v-if="typeof this.result == 'undefined' || this.result == null">
            暂无电子地图</div>
          <div class="Trd-map" v-else ref="chinaMapChart"></div>
          <!-- 右边抽屉按钮 -->
          <el-button class="rightBtn" @click="dialog = true" round type="primary" size="mini"  icon="el-icon-d-arrow-left"
                     style="color: #0b73c5;z-index:1000;position: fixed;right:0%;top:60%;border:none;background:none !important;">
          </el-button>
        </div>
        <!-- <img src="../../components/images/line.png" alt=""> -->
        <div class="videobox3">
          <!-- 云台 -->
          <div class="ytkz">
            <div class="videobox3-1">
              <p>云台</p>
              <span></span>
            </div>
            <div class="videobox3-2">
              <!-- 八角云盘 -->
              <div class="ptz">
                <!-- /* 外圆环 */ -->
                <div id="round"></div>
                <!-- /* 黑色内圆环 */ -->
                <div id="center_black"></div>
                <div id="center_blue" @click="HKpicture">
                  <span>抓图</span>
                </div>
                <div id="circle0">
                  <div id="left">
                    <div class="circle-left" id="circle2" @click="startUp" @mousedown="startUp1" @mouseup="stopUp1">
                      <span>上</span>
                    </div>
                    <div class="circle-left" id="circle3" @click="startUpRight" @mousedown="startUpRight1"
                         @mouseup="stopUpRight1">
                      <span>右上</span>
                    </div>
                    <div class="circle-left" id="circle4" @click="startRight" @mousedown="startRight1"
                         @mouseup="stopRight1">
                      <span>右</span>
                    </div>
                    <div class="circle-left" id="circle5" @click="startDownRight" @mousedown="startDownRight1"
                         @mouseup="stopDownRight1">
                      <span>右下</span>
                    </div>
                  </div>
                  <div id="right">
                    <div class="circle-right" id="circle9" @click="startUpLeft" @mousedown="startUpLeft1"
                         @mouseup="stopUpLeft1">
                      <span>左上</span>
                    </div>
                    <div class="circle-right" id="circle8" @click="startLeft" @mousedown="startLeft1" @mouseup="stopLeft1">
                      <span>左</span>
                    </div>
                    <div class="circle-right" id="circle7" @click="startDownLeft" @mousedown="startDownLeft1"
                         @mouseup="stopDownLeft1">
                      <span>左下</span>
                    </div>
                    <div class="circle-right" id="circle6" @click="startDown" @mousedown="startDown1" @mouseup="stopDown1">
                      <span>下</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 变倍 -->
              <div class="videobox3-3">
                <div class="videobox3-3-1">
                  <p class="btn1" @click="startBBminus" @mousedown="startBBminus1" @mouseup="stopBBminus1"><i
                      class="el-icon-minus"></i></p>
                  <p>变倍</p>
                  <p class="btn2" @click="startBBplus" @mousedown="startBBplus1" @mouseup="stopBBplus1"><i
                      class="el-icon-plus"></i></p>
                </div>
                <div class="videobox3-3-1">
                  <p class="btn1" @click="startBJminus" @mousedown="startBJminus1" @mouseup="stopBJminus1"><i
                      class="el-icon-minus"></i></p>
                  <p>变焦</p>
                  <p class="btn2" @click="startBJplus" @mousedown="startBJplus1" @mouseup="stopBJplus1"><i
                      class="el-icon-plus"></i></p>
                </div>
                <div class="videobox3-3-1">
                  <p class="btn1" @click="startGQminus" @mousedown="startGQminus1" @mouseup="stopGQminus1"><i
                      class="el-icon-minus"></i></p>
                  <p>光圈</p>
                  <p class="btn2" @click="startGQplus" @mousedown="startGQplus1" @mouseup="stopGQplus1"><i
                      class="el-icon-plus"></i></p>
                </div>
              </div>
            </div>
          </div>
          <!-- 音频控制 -->
          <div class="ypkz">
            <div class="yspkz">
              <p>音视频</p>
              <span></span>
            </div>
            <div class="btnBox">
              <div class="btnBox1">
                <el-button class="btn" size="mini" @click="HKtiming">校时</el-button>
                <p contenteditable="true" id="sy"></p>
              </div>
              <div class="btnBox2">
                <el-button class="btn1" size="default" v-show="lxShow">离线</el-button>
                <el-button class="btn3" size="default" v-show="zxShow">在线</el-button>
                <el-button class="btn2" size="default" @click="HKwatermark">水印</el-button>
              </div>
              <div class="btnBox3">
                <el-button class="btn1" size="mini" @click="HKstartVideo">录像</el-button>
                <el-button class="btn2" size="mini" @click="HKendVideo">停止</el-button>
              </div>
              <div class="btnBox4">
                <el-button class="btn1" size="mini" @click="sxtss()">上升</el-button>
                <el-button class="btn2" size="mini" @click="sxtxj()">下降</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边抽屉 -->
      <div class="rightDrawer">
        <el-drawer :modal="false"  :direction="directions" :visible.sync="dialog" :with-header="false" size="20%">
          <div class="put">
            <el-input placeholder="请输入机器人名称" v-model="robot_name" @change="getRobotName($event)" prefix-icon="el-icon-search"
                      clearable></el-input>
          </div>
          <div class="table">
            <el-table :data="robotList" @row-click="handleSelectionChange" height="100%"
                      :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                      :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
                      :row-style="{ height: '40px', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
                      :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
              <el-table-column prop="robot_num" label="编号"/>
              <el-table-column prop="robot_name" label="名称"/>
              <el-table-column prop="robot_state" label="状态" width="70px">
                <template slot-scope="scope">
                  <i class="el-icon-error" v-if="scope.row.robot_state === 0"
                     style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
                  <i class="el-icon-success" v-if="scope.row.robot_state === 1"
                     style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import flvjs from 'flv.js'
import{ flvVideo, flvStop} from '@/api/nssc/guanlang/guanlang';
import FlvExtend from 'flv-extend';
import $ from "jquery";
import {
  htCmd,
  jqrdataCmd,
  jqrsdCmd,
  mbwzCmd,
  msszCmd,
  qjCmd,
  robotrunCmd,
  robotstopCmd,
  yjfhCmd,
  zdqdCmd,
  zymsmsszCmd, listonPageRobotConfig, jqrsdzymsCmd
} from "@/api/nssc/robotcontrol/robotcontrol";
import {
  HKendVideo,
  HKfocusAdd,
  HKfocusAdd1,
  HKfocusAddEnd1,
  HKfocusDec,
  HKfocusDec1,
  HKfocusDecEnd1,
  HKirisAdd,
  HKirisAdd1,
  HKirisAddEnd1,
  HKirisDec,
  HKirisDec1,
  HKirisDecEnd1,
  HKonline,
  HKpicture,
  HKptzDown,
  HKptzDown1,
  HKptzDownEnd1,
  HKptzLeft,
  HKptzLeft1,
  HKptzLeftDown,
  HKptzLeftDown1,
  HKptzLeftDownEnd1,
  HKptzLeftEnd1,
  HKptzLeftUp,
  HKptzLeftUp1,
  HKptzLeftUpEnd1,
  HKptzRight,
  HKptzRight1,
  HKptzRightDown,
  HKptzRightDown1,
  HKptzRightDownEnd1,
  HKptzRightEnd1,
  HKptzRightUp,
  HKptzRightUp1,
  HKptzRightUpEnd1,
  HKptzUp,
  HKptzUp1,
  HKptzUpEnd1,
  HKstartVideo,
  HKtiming,
  HKwatermark,
  HKzoomAdd,
  HKzoomAdd1,
  HKzoomAddEnd1,
  HKzoomDec,
  HKzoomDec1,
  HKzoomDecEnd1
} from "@/api/nssc/hkvideo/video";
import { ippingCmd ,getTrackMaprobot} from "@/api/nssc/home/home";
import point from '@/assets/imgs/point1.png';
import rbt1 from '@/assets/imgs/rbt4.png';
import rbt from '@/assets/imgs/rbt3.png';
import {sxtssCmd, sxtxjCmd, zymshtCmd, zymsqjCmd, zymsrobotrunCmd} from "@/api/nssc/arobotcontrol/arobotcontrol";
let myChart = null;
let myChart1 = null;
let myChart3 = null;
let myChart4 = null;
export default {
  data() {
    return {
      //右侧抽屉
      dialog: false,
      directions: 'rtl',
      //是否展示视频画面
      videoShow: false,
      //判断展示在线或离线
      zxShow: false,
      lxShow: true,
      //机器人列表
      robotList: [],
      result: [],
      //控制机器人的滚动条
      isDologin: false,
      robot_name: undefined,//机器人名称
      zymssdzd: 1000,//自动模式速度设定
      sdmsd: '1000', //手动模式机器人速度
      jqrfx: '无', //机器人方向
      jqrms: '无',//机器人模式
      sswy: '无',//位移
      dj:'无',//电机
      dcdy:'无',//电池电压
      dcdl:'无',//电池电量
      jqrsd: '无',//机器人速度设定
      bqbh:'无',//标签编号
      czbh:'无',//池子编号
      //机器人数据
      robot: {},
      count: 0,
      //控制模式板块的切换(表示默认显示第一个内容)
      selectedTab: 0,
      queryParams: {
        robot_name: undefined //机器人名称
      },queryParams1: {
        robot_config_id: undefined
      },queryparms2: {
        robotid: undefined,
      },//查询参数
      queryparms3: {
        robotid: undefined,
        valu: undefined,
        robot_ip: undefined,
        robot_port: undefined,
        video_ip1: undefined,
        video_name1: undefined,
        video_pwd1: undefined,
        video_port1: undefined,
      },//摄像头参数
      queryparms4: {
        valu: undefined,
        video_ip1: localStorage.getItem("video_ip1"),
        video_name1: localStorage.getItem("video_name1"),
        video_pwd1: localStorage.getItem("video_pwd1"),
        video_port1: localStorage.getItem("video_port1"),
        robot_config_id: localStorage.getItem("robot_config_id"),
      },//在线或离线
      online: '',
      robotid: localStorage.getItem("robot_config_id"),
      timer: null,//定时器
      timer1: null,//定时器
      rtspUrl:'', //rtsp视频流地址
      flvUrl:null,//请求回来的flv视频流地址
      flvPlayer: null
    }
  },
  created() {
    //初始化页面加载方法
    this.getList();//机器人列表
    this.getMap();//电子地图
  },
  mounted() {
    //加载完页面加载方法
    this.echarts1(0);//电机转速
    this.echarts2(0);//电机温度
    this.echarts3(0);//电池电量
    //机器人标题
    $("#robotitle").text(localStorage.getItem("robot_name") == null?"机器人":localStorage.getItem("robot_name"));
    this.timer1 = setInterval(() => {
      this.getList();//机器人列表
      this.readata();//机器人数据
      this.getMap();//电子地图
      console.log("机器人控制定时")
    }, 2000);//2秒
    this.HKonlines() //摄像头在线离线
    //判断ip是否通
    if(localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != ""){
      this.stopFlvVideo() //停止flv流
      ippingCmd(localStorage.getItem("video_ip1")).then(response =>{
        if(typeof (response.data)!= "undefined" && response.data != null && response.data == true ) {
          this.flvSpbf();
        }else{
          console.log("摄像头ip:" + localStorage.getItem("video_ip1") + "ping不通" )
        }
      })
    }else{
      console.log("摄像头ip:"+localStorage.getItem("video_ip1")+"为空！")
    }
  },
  methods: {
    //flv视频
    flvSpbf(){
      const rtspUrl = {
        rtspUrl : 'rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/h264/ch1/main/av_stream'
      }
      flvVideo( rtspUrl ).then(response => {
        this.flvUrl = response.data
        this.createFlvPlayer(response.data)
      })
    },
    //播放flv 的固定代码
    createFlvPlayer(flvUrl) {
      // 根据FLV URL创建播放器实例
      if (flvjs.isSupported()) {
        const videoElementH = document.getElementById('videoHK')
        if (videoElementH) {
          // 配置需要的功能
          this.flvPlayer  = new FlvExtend({
            element: videoElementH, // *必传
            frameTracking: true, // 开启追帧设置
            updateOnStart: true, // 点击播放后更新视频
            updateOnFocus: true, // 获得焦点后更新视频
            reconnect: true, // 开启断流重连
            reconnectInterval: 0 // 断流重连间隔
          })
          // 调用 init 方法初始化视频
          // init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
          const player = this.flvPlayer.init(
              {
                type: 'flv',
                url: flvUrl,
                isLive: true
              },
              {
                enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
                autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
                stashInitialSize: 128, // 减少首帧显示等待时长
                enableWorker: true // 启用分离的线程进行转换
              }
          )
          // 直接调用play即可播放
          player.play()
        }
      }
    },//停止flv视频流
    stopFlvVideo(){
      flvStop().then(response=>{})
    },
    //根据输入框机器人名称，查询机器人列表
    getRobotName(robot_name) {
      this.queryParams.robot_name = robot_name;
      this.getList();
    },//获取当前机器人数据
    handleSelectionChange(row) {
      localStorage.removeItem("video_ip1");//删除1摄像头ip
      localStorage.removeItem("video_port1");//删除1摄像头端口
      localStorage.removeItem("video_name1");//删除1摄像头账号
      localStorage.removeItem("video_pwd1");//删除1摄像头密码
      localStorage.removeItem("robot_name");//删除机器人名称
      localStorage.removeItem("robot_config_id");//删除机器人id
      localStorage.removeItem("robot_state");//删除机器人状态
      localStorage.setItem("video_ip1", row.video_ip1);//存储值
      localStorage.setItem("video_port1", row.video_port1);//存储值
      localStorage.setItem("video_name1", row.video_name1);//存储值
      localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
      localStorage.setItem("robot_name", row.robot_name);//存储值
      localStorage.setItem("robot_config_id", row.id);//存储值
      localStorage.setItem("robot_state", row.robot_state);//存储值
      this.robotid = localStorage.getItem('robot_config_id')
      //摄像头参数
      this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
      this.queryparms4.video_name1 = localStorage.getItem("video_name1");
      this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
      this.queryparms4.video_port1 = localStorage.getItem("video_port1");
      this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
      //机器人名称标题
      $("#robotitle").text(localStorage.getItem("robot_name"));
      this.HKonlines(); //摄像头在线离线状态
      //判断ip是否通
      if(localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != ""){
        this.stopFlvVideo() //停止flv流
        ippingCmd(localStorage.getItem("video_ip1")).then(response =>{
          if(typeof (response.data)!= "undefined" && response.data != null && response.data == true ){
            this.flvSpbf();
          }else{
            console.log("摄像头ip:" + localStorage.getItem("video_ip1") + "ping不通" )
          }
        })
      }else{
        console.log("摄像头ip:"+localStorage.getItem("video_ip1")+"为空！")
      }
    },
    //查询机器人列表
    getList() {
      this.loading = true;
      listonPageRobotConfig(this.queryParams).then(response => {
        this.robotList = response.rows;
        this.loading = false;
      });
    },//一键返航
    yjfh() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      yjfhCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自动模式(启动)
    zdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zdqdCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式前进
    zymsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsqjCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式后退
    zymsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymshtCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式速度设置
    zymsdsd() {
      this.queryparms3.valu = this.zymssdzd;
      console.log("自由模式速度设置" + this.zymssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdzymsCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自由模式速度设置不能为空")
      }
    },//自由模式速度设定
    //自由模式(启动)
    zymsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsrobotrunCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },
    zymslb(zymssdzd) {
      this.zymssdzd = zymssdzd;
    },//手动模式后退
    sdmsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      htCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//摄像头下降
    sxtxj(){
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      sxtxjCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//摄像头上升
    sxtss(){
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      sxtssCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动模式前进
    sdmsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      qjCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动模式(启动)
    sdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotrunCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动模式速度设置
    sdmsdF() {
      this.queryparms3.valu = this.sdmsd;
      console.log("手动模式速度设置" + this.sdmsd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("手动模式速度设置不能为空")
      }
    },//手动模式速度列表
    sdmslb(sdmsd) {
      this.sdmsd = sdmsd; // 手动模式速度列表
    },//手动模式目标位置
    mbwzF() {
      this.queryparms3.valu = $("#mbwzid").text();
      console.log("目标位置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        mbwzCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("目标位置不能为空")
      }
    },//机器人暂停
    zt() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotstopCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//机器人自由模式设置
    jqrzymsF(jqrms) {
      this.queryparms3.valu = jqrms
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymsmsszCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    },//机器人模式设置
    jqrmsF(jqrms) {
      this.queryparms3.valu = jqrms
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        msszCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    },//当前机器人数据
    readata() {
      this.queryparms2.robotid = localStorage.getItem("robot_config_id");
      jqrdataCmd(this.queryparms2).then(response => {
        if (typeof (response.data) != "undefined" && response.data != null) {
          this.jqrms = response.data.jqrms; //机器人模式
          this.jqrfx = response.data.jqrfx; //机器人方向
          this.sswy = response.data.sswy;//实时位移
          this.dcdl = response.data.dcdl;//电池电量
          this.dcdy =  response.data.dcdy;//电池电压
          this.jqrsd = response.data.jqrsd;//机器人速度设定
          this.czbh =  response.data.czbh;//池子编号
          this.bqbh = response.data.bqbh;//标签编号
          this.dj = response.data.dj;//电机
          this.echarts1(response.data.djzs == "" ? 0:response.data.djzs );//电机转速
          this.echarts2(response.data.djwd == "" ? 0 : response.data.dcdy);//电池电压
          this.echarts3(response.data.dcdl == "" ? 0 : response.data.dcdl);//电池电量
        } else {
          this.jqrms = "无"; //机器人模式
          this.jqrfx = "无"; //机器人方向
          this.sswy = "无"; //位移
          this.dcdl = "无"; //电池电量
          this.dcdy = "无"; //电池电压
          this.jqrsd = "无";//机器人速度设定
          this.czbh ="无";
          this.bqbh ="无";
          this.dj ="无";
          this.echarts1(0);//电机转速
          this.echarts2(0);//电池电压
          this.echarts3(0);//电池电量
        }
      });
    },//电机转速
    echarts1(djzs) {
      if (this.$refs.chinaMapChart1) {
        this.$nextTick(() => {
          myChart = echarts.init(this.$refs.chinaMapChart1);
          myChart.setOption(
       {
                series: [
                  {
                    radius: "100%",
                    center: ['50%', '50%'],
                    type: 'gauge',
                    axisLine: {
                      lineStyle: {
                        width: 22,
                        color: [
                          [0.3, '#3e78f5'],
                          [0.7, '#9a54eb'],
                          [1, '#f37886']
                        ]
                      }
                    },
                    pointer: {
                      width: 7,
                      itemStyle: {
                        color: '#3e78f5'
                      }
                    },
                    axisTick: {
                      distance: -20,
                      length: 11,
                      lineStyle: {
                        color: '#fff',
                        width: 1
                      }
                    },
                    splitLine: {
                      distance: -20,
                      length: 18,
                      lineStyle: {
                        color: '#fff',
                        width: 2
                      }
                    },
                    axisLabel: {
                      color: '#fff',
                      distance: 9,
                      fontSize: 9
                    },
                    detail: {
                      // width:60,
                      // height:60,
                      fontSize: 10,
                      valueAnimation: true,
                      formatter: '{value} m/min',
                      color: '#fff'
                    },
                    data: [
                      {
                        value: djzs,
                        name: '电机转速',
                      }
                    ],
                    title: {
                      show: true,
                      fontSize: 10,
                      offsetCenter: ["0", "10%"],
                      color: '#fff'
                    },
                    max: 5000,
                    min: 0
                  }
                ]
              }
          );
          window.addEventListener("resize", () => {
            if (myChart != null) myChart.resize();
          })
        })
      }
    },//电池电压
  echarts2(dcdy) {
    this.$nextTick(() => {
      myChart4 = echarts.init(this.$refs.chinaMapChart4);
      myChart4.setOption(
          {
            series: [
              {
                radius: "70%",
                center: ['50%', '50%'],
                type: 'gauge',
                max: 200,
                itemStyle: {
                  color: '#FFAB91'
                },
                progress: {
                  show: true,
                  width: 30
                },
                splitNumber: 8,
                axisLine: {
                  lineStyle: {
                    width: 17,
                    color: [
                      [1, '#ddebf6'],
                    ]
                  }
                },
                pointer: {
                  show: true,
                  width: 5,
                  itemStyle: {
                    color: '#FD7347'
                  }
                },
                axisTick: {
                  // show:false,
                  distance: -13,
                  length: 10,
                  lineStyle: {
                    color: '#a9a9a9',
                    width: 1
                  }
                },
                splitLine: {
                  distance: -10,
                  length: 14,
                  lineStyle: {
                    color: '#a9a9a9',
                    width: 2
                  }
                },
                axisLabel: {
                  color: '#a0e2f6',
                  distance: -30,
                  fontSize: 8
                },
                detail: {
                  // width:60,
                  // height:60,
                  fontSize: 10,
                  valueAnimation: true,
                  formatter: '{value}(v)',
                  color: '#daa666'
                },
                data: [
                  {
                    value: dcdy,
                    name: '电池电压',
                  }
                ],
                title: {
                  show: true,
                  offsetCenter: ["0", "-20%"],
                  color: '#daa666',
                  fontSize: 10
                },
                max: 200,
                min: 0
              }
            ]
          }
      );
      window.addEventListener("resize", () => {
        if (myChart4 != null) myChart4.resize();
      })
    })
  },//电池电量
  echarts3(dcdl) {
    this.$nextTick(() => {
      myChart3 = echarts.init(this.$refs.chinaMapChart3);
      myChart3.setOption(
          {
            series: [{
              name: "电量",
              type: "gauge",
              clockwise: true,
              data: [{
                value: dcdl,
                name: "电池电量",
              }],
              radius: "100%",
              // 仪表盘半径
              // startAngle: 208,
              // endAngle: -28,
              min: 0,
              max: 100,
              splitNumber: 10,
              center: ["50%","50%"],
              axisLabel: {
                // 大刻度标签。
                show: true,
                distance: 10,
                color: "white",
                fontSize: 8,
                formatter: "{value}",
              },
              splitLine: {
                length: 16,
                // 分隔线长度
                lineStyle: {
                  width: 2,
                  color: '#ffffff'
                }
              },
              axisLine: {
                // 仪表盘轴线(轮廓线)相关配置。
                show: true,
                lineStyle: {
                  // 仪表盘轴线样式。
                  opacity: 1,
                  width: 18,
                  // 表盘宽度
                  shadowBlur: 10,
                  color: [// 仪表盘轴线颜色
                    [1,
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#56def6"
                      },
                        {
                          offset: 0.3,
                          color: "#56def6"
                        },
                        {
                          offset: 1,
                          color: "#56def6"
                        }])
                    ]
                  ]
                },
              },
              axisTick: {
                // 小刻度相关
                splitNumber:6,
                // 小刻度个数
                show: true
              },
              detail: {
                // 仪表盘详情数据相关
                color: "#5ab1ef",
                fontSize: 10,
                formatter: "{value}%",
                offsetCenter: [0,
                  '20']
              },
              title: {
                show: true,
                offsetCenter: ["0", "-18%"],
                color: '#b6cbea',
                fontSize: 10
              },
              itemStyle: {
                // 指针样式
                color: "#e8e8f3"
              },
              pointer: {
                // 仪表盘指针。
                show: true,
                length: "70%",
                width: 6,
              },
            },
            ],
          }
      );
      window.addEventListener("resize", () => {
        if (myChart3 != null) myChart3.resize();
      })
    });
  },//摄像头在线或离线状态
    HKonlines() {
      if (localStorage.getItem("video_ip1") != null
          && localStorage.getItem("video_name1") != null
          && localStorage.getItem("video_pwd1") != null
          && localStorage.getItem("video_port1") != null
          && localStorage.getItem("robot_config_id") != null
      ) {
        this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
        HKonline(this.queryparms4).then(response => {
          this.online = response.data[0].hKloginValue
          //判断是否展示视频
          if (this.online != -1) {
            this.videoShow = true  //摄像头在线则展示视频画面
            this.zxShow = true
            this.lxShow = false
          } else {
            this.videoShow = false  //摄像头不在线则不展示视频画面
            this.zxShow = false
            this.lxShow = true
          }
        });
      } else {
        this.$modal.msg("海康摄像头账号为空")
        this.videoShow = false //账号为空则不展示视频画面
        this.zxShow = false
        this.lxShow = true
      }
    },
    /////////////////////海康摄像头//////////////////
    //校时
    HKtiming() {
      HKtiming(this.queryparms4).then(response => {
        if (typeof (response) != null)
          this.$modal.msg(response.msg);
      });
    },//水印
    HKwatermark() {
      this.queryparms4.valu = $("#sy").text()
      const value = this.queryparms4.valu
      if (value === '') {
        this.$modal.msg('摄像头水印不能为空')
      } else {
        HKwatermark(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      }
    },//手动录像开始
    HKstartVideo() {
      HKstartVideo(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },//手动录像停止
    HKendVideo() {
      HKendVideo().then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },//拍照
    HKpicture() {
      HKpicture(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },//云台向上点击
    startUp: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向上----长按
    startUp1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzUp1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
          //console.log("88888", queryparms1)
        });
      }, 500)
    },
    stopUp1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzUpEnd1(this.queryparms4).then(response => {
      });
    },//云台向下点击
    startDown: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向下----长按
    startDown1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopDown1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzDownEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    }, //云台向左点击
    startLeft: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzLeft(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向左----长按
    startLeft1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzLeft1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopLeft1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzLeftEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向右点击
    startRight: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzRight(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向右----长按
    startRight1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzRight1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopRight1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzRightEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向左上点击
    startUpLeft: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzLeftUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向左上----长按
    startUpLeft1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzLeftUp1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopUpLeft1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzLeftUpEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向右上点击
    startUpRight: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzRightUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向右上----长按
    startUpRight1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzRightUp1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopUpRight1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzRightUpEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向左下点击
    startDownLeft: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzLeftDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向左下----长按
    startDownLeft1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzLeftDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopDownLeft1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzLeftDownEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向右下点击
    startDownRight: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzRightDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向右下----长按
    startDownRight1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzRightDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopDownRight1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzRightDownEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台变倍+点击
    startBBplus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKzoomAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台变倍+  --  长按
    startBBplus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKzoomAdd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBBplus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKzoomAddEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台变倍-点击
    startBBminus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKzoomDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台变倍-  --  长按
    startBBminus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKzoomDec1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBBminus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKzoomDecEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台变焦+点击
    startBJplus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKfocusAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台变焦+  --  长按
    startBJplus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKfocusAdd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBJplus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKfocusAddEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台变焦-点击
    startBJminus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKfocusDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台变焦-  --  长按
    startBJminus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKfocusDec1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBJminus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKfocusDecEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台光圈+ 点击
    startGQplus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKirisAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台光圈+ --  长按
    startGQplus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKirisAdd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopGQplus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKirisAddEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台光圈- 点击
    startGQminus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKirisDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台光圈- --  长按
    startGQminus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKirisDec1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopGQminus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKirisDecEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    }, //电子地图
    getMap() {
      this.queryparms2.robotid = localStorage.getItem("robot_config_id")
      getTrackMaprobot(this.queryparms2).then(response => {
        if (typeof response.data != "undefined" && response.data != null && response.data.dzdt.length > 0) {
          this.result = response.data.dzdt;
          this.arrdata = [[]];//初始化地图值
          if (typeof (response.data.positionxy) != "undefined" && response.data.positionxy != "unxy") {
            let positionxy = response.data.positionxy.split(",");//xy坐标
            localStorage.removeItem("xposition");//删除键值  机器人开始位置x坐标
            localStorage.removeItem("yposition");//删除键值 机器人开始位置y坐标
            localStorage.removeItem("xjbh");//删除键值 机器人开始位置y坐标
            localStorage.setItem("xposition", positionxy[0]);//存储值 机器人开始位置x坐标
            localStorage.setItem("yposition", positionxy[1]);//存储值 机器人开始位置y坐标
            localStorage.setItem("xjbh", response.data.xjbh);//存储值 巡检点编号
          }
          const result_len = this.result.length;
          for (let i = 0; i < result_len; i++) {
            //因为我在后台取出来的数据是一行的，字符串形式
            let dataArray = this.result[i].xyposition.split(",");
            //这句话是必须的，每次都要新建一个一维数组,不然会报错
            this.arrdata[i] = new Array();
            const data_len = dataArray.length;
            for (let j = 0; j <data_len; j++) {
              this.arrdata[i][j] = dataArray[j];
            }
          }//电子地图
          if (this.count % 2 == 0)
            this.initEcharts(this.arrdata,localStorage.getItem("xposition"),localStorage.getItem("yposition"),localStorage.getItem("xjbh"), 1);//交替getMap
          else
            this.initEcharts(this.arrdata, localStorage.getItem("xposition"),localStorage.getItem("yposition"),localStorage.getItem("xjbh"), 2);
          this.count += 1;
        } else {
          if(myChart1 != null) myChart1.dispose()//销毁echarts
          this.result = null;
        }
      });
    },//电子轨道图方法
    initEcharts(dtop, xposition, yposition, xjbh, fg) {
      if (this.$refs.chinaMapChart) {
        this.$nextTick(() => {
          myChart1 = echarts.init(this.$refs.chinaMapChart)
          let option;
          //轨道地图数据
          const data = dtop;
          let img = document.createElement('img');
          img.src = (this.picpath == null || this.picpath == '') ? require('@/assets/images/map-default.png')
              : this.picpath;
          option = {
            tooltip: {
              trigger: 'item',
              formatter: (params) => {  // params就是数据，这里可以打印一下看看
                // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
                if (typeof params.data[0] == 'undefined') {
                  return ``
                } else {
                  return `${params.data[2]}</br>${params.marker}横坐标:${params.data[0]}</br>纵坐标:${params.data[1]}`
                }
              }
            },
            title: {
              /* text: '机器人巡检轨迹图',*/
              left: 'center'
            },
            grid: {//底图四个方向调整
              top: '8%',
              bottom: '2%',
              left: '6%',
              right: '3%'
            },
            xAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            yAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false,  //刻度线
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            series: [
              {
                label: {
                  //color: '#cefc04',
                  show: true,
                  position: "top",
                  formatter: '{@value}',// 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
                  textStyle: { color: '#fcf804', fontSize: 8 }
                },
                id: 'a',
                /* type: (this.picpath == null || this.picpath == '') ? 'line':'scatter',//scatter 散点，line 曲线*/
                type: 'line',
                smooth: true,// true 曲线
                itemStyle: {
                  // 设置线条颜色
                  normal: {
                    color: {
                      colorStops: [{
                        offset: 0.5, color: '#06359b' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#054098' // 100% 处的颜色
                      }]
                    },
                    lineStyle: {
                      width: (this.picpath == null || this.picpath == '') ? 3 : 3,
                      type: (this.picpath == null || this.picpath == '') ? 'solid' : 'solid'//可选值还有 dotted  solid
                    }
                  }
                },
                symbolSize: 4,//巡检点大小
                symbol: 'image://' + point,//巡检点图标
                data: data,
                //  symbol: 'circle',
                markPoint: {
                  label: {
                    color: '#53fcb5',  // 文字颜色
                    // padding: [0, 0,-10, 0], // 可用padding调整图片内文字距离
                    show: true,
                    //formatter: '巡检机器人'// 自定义文字内容
                  },
                  //机器人大小
                  itemStyle: {
                    color: {
                      type: 'linear',
                      colorStops: [{
                        offset: 0, color: 'blue' // 0% 处的颜色
                      }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                      }]
                    }
                  },
                  //symbol: 'circle',
                  symbol: fg == 1 ? 'image://' + rbt : 'image://' + rbt1,
                  // 自定义图片作为标注展示
                  // symbolSize: [58, 38],  // 调整图片的长宽
                  // symbolOffset: [10, '-50%'],  // 调整标注图片的位移方向 大小
                  symbolSize: 16,//机器人大小
                  data: [{//1机器人移动坐标位置
                    xAxis: xposition,
                    yAxis: yposition,
                    value: xjbh,
                    fontSize: 8
                  }],
                }
              },
              // 闪烁点的重点是以下配置
              {
                // 设置圆心点特效动画、大小
                type: 'effectScatter', data: dtop,
                symbolSize: 5,
                coordinateSystem: 'cartesian2d',
                // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
                showEffectOn: 'render',
                // 涟漪特效配置
                rippleEffect: {
                  color: '#1229d5',
                  scale: 4,
                  // 波纹的绘制方式,可选'stroke'和'fill'
                  brushType: 'stroke'
                },
                //圆心点
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: '#0826b7',
                    shadowBlur: 80,
                    shadowColor: '#094a9f',
                  }
                },
                zlevel: 1
              }
            ]
          }
          if (option && typeof option === 'object') {
            myChart1.setOption(option);
          }
          window.addEventListener("resize", () => {
            if(myChart1!=null)myChart1.resize();
          });//同比缩放
        })
      }
    },
  },
  beforeDestroy() {
    if(this.rtspUrl != null||this.rtspUrl != ""){this.rtspUrl = "";}
    if(this.flvPlayer != null){this.flvPlayer.destroy();this.flvPlayer = null;}
    this.stopFlvVideo() //停止供流

    if(myChart != null){myChart.clear();myChart = null;}
    if(myChart1 != null){myChart1.clear();myChart1 = null;}
    if(myChart3 != null){myChart3.clear();myChart3 = null;}
    if(myChart4 != null){myChart4.clear();myChart4 = null;}
    if(this.timer) {clearInterval(this.timer);}
    if(this.timer1) {clearInterval(this.timer1);}
  }, enter() {
    this.isDologin = true;
  }, leave() {
    this.isDologin = false;
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 40px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #011137 !important;
  //padding-left:0;
}

* {
  margin: 0;
  padding: 0;
}

.el-button+.el-button {
  margin-left: 0px;
}

//左边
.left {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;

  // justify-content: space-between;
  .put {
    width: 98%;
    margin: 10px;

    ::v-deep .el-input {
      width: 100%;
      height: 20px;
    }

    ::v-deep .el-input__inner {
      border: 2px solid #0264bf;
      background-color: #081a46;
      // margin: 10px;
    }
  }

  .table {
    width: 98%;
    height: 200px;
    margin: 10px;
    // margin-top: 20px;
    overflow: auto;

    ::v-deep .el-table__body-wrapper {
      &::-webkit-scrollbar {
        // 整个滚动条
        width: 0px; // 纵向滚动条的宽度
        background: rgba(71, 103, 182, 0.3);
        border: none;
      }

      &::-webkit-scrollbar-track {
        // 滚动条轨道
        border: none;
      }
    }

    .el-table {
      width: 100%;

    }

    ::v-deep .el-table th.gutter {
      display: none;
      width: 0
    }

    ::v-deep .el-table colgroup col[name='gutter'] {
      display: none;
      width: 0;
    }

    // ::deep .el-table::before {
    //     height: 0px;
    // }

    ::v-deep .el-table__body {
      width: 100%;
      // padding-left: 10px;
    }

    ::v-deep .el-table__body-wrapper {
      width: 100%;
      background-color: #081a46;
    }

    /*滚动条的宽度*/
    .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: none;
      width: 0;
    }

    .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: block;
      width: 0;
    }

    ::v-deep .el-table tr {
      background-color: transparent;
      border: none;
      // height: 50px;
      width: 100%;
      background-color: #081a46;
    }

    ::v-deep .el-table td {
      background-color: trannt;
      border: none;
      width: 100%;
      // height: 50px;
      background-color: #081a46;
    }

    // /* 表格内背景颜色 */
    ::v-deep .el-table th {
      background-color: transparent;
      border: none;
      width: 100%;
    }

    // 移入变色
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: #222448;
    }
  }

  ::v-deep.el-progress-bar__inner {
    background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
  }

  .table::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
  }
}

//中间
.video-center {
  width: 47%;
  height: 100%;
  margin-left: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #011137 !important;

  .center-box1 {
    width: 98%;
    height: 60%;
    background: #011137 !important;
    border: 1px solid #27306b;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .Speed-dial {
      width: 95%;
      height: 58%;
      display: flex;
      justify-content: center;
      align-items: center;

      >div {
        width: 93%;
        height: 100%;
        margin-top: 10px;
        //background-color: #00FF00;
      }
    }

    .right-mode {
      width: 90%;
      height: 10%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      //background-color: #00FF00;

      .right-mode1 {
        width: 45%;
        height: 100%;
        //background-color: burlywood;
        display: flex;
        justify-content: center;
        align-items: center;

        :nth-child(1) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 4px;
        }

        :nth-child(2) {
          width: 50px;
          height: 25px;
          background: #011137 !important;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .right-mode2 {
        width: 45%;
        height: 100%;
        //background-color: burlywood;
        display: flex;
        justify-content: center;
        align-items: center;

        :nth-child(1) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 4px;
        }

        :nth-child(2) {
          width: 50px;
          height: 25px;
          background: #011137 !important;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .Mode-selection {
      width: 98%;
      height: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 40px;

      p {
        width: 96px;
        height: 24px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }
    }

    .Operation-button {
      width: 80%;
      height: 18%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-left: 7px;
      // margin-bottom: 1%;

      .Operation-buttonBox {
        width: 60px;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        :nth-child(1) {
          width: 30px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(68deg, #3040F4, #3F79F4);
          margin-bottom: 5px;
          border-width: 0px
        }

        :nth-child(2) {
          width: 60px;
          height: 16px;
          text-align: center;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }
      }
    }
  }

  //手动模式
  .center-box2-1 {
    width: 98%;
    height: 40%;
    background: #011137 !important;
    border: 1px solid #27306b;
    border-top: none;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .right-bottomTitle {
      width: 98%;
      height: 20%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // background-color: #00FF00;

      >p {
        width: 95px;
        height: 22px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
        margin-left: 40px;
      }

      span {
        display: block;
        width: 50px;
        height: 2px;
        margin-left: 0.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // background-color: #2ec7a1;

      .rightbox1 {
        width: 100%;
        height: 50%;
        //background-color: coral;
        display: flex;
        justify-content: center;
        align-items: center;

        ::v-deep .el-input--medium .el-input__inner {
          height: 30px;
          font-size: 12px;
          background: #0F1A43;
          border: 2px solid #54619D;
          border-radius: 10px;
        }

        ::v-deep .el-select:hover .el-input__inner {
          border-color: #54619D !important;
        }

        ::v-deep .el-input--suffix .el-input__inner {
          padding-right: 18px !important;
        }

        >span {
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          margin-left: 5px;
        }

        .btn1 {
          width: 80px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          // margin-bottom: 10px;
          margin-left: 30px;
        }
      }

      .rightbox2 {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        //background-color: #9B6D2B;

        >span {
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          margin-left: 2px;
        }

        .btn2 {
          width: 80px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-left: 28px;
        }
      }

    }

    .rightbox3 {
      width: 98%;
      height: 25%;
      display: flex;
      align-items: center;
      justify-content: center;

      //background-color: darkkhaki;
      .rightbox3-1 {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        //background-color: #2ec7a1;
        .btn1 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #065D70);
          border: 2px solid #108B8F;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          margin-left: 34px;
          margin-right: 34px;
        }

        .btn3 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #4C0820, #0D1538);
          border: 2px solid #942028;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

    }
  }

  //自动模式
  .center-box2-2 {
    width: 98%;
    height: 40%;
    background: #011137 !important;
    border: 1px solid #2A2E4A;
    border-top: none;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;

    .right-bottomTitle {
      width: 98%;
      height: 20%;
      margin-top: 1%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      //background-color: #00FF00;

      >p {
        width: 95px;
        height: 22px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
        margin-left: 42px;
      }

      span {
        display: block;
        width: 50px;
        height: 2px;
        margin-left: 1.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox1 {
      width: 98%;
      height: 20%;
      //background-color: #108B8F;
      display: flex;
      align-items: center;
      justify-content: center;

      >span {
        margin-left: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      .btn {
        width: 80px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
        margin-left: 20px;
      }
    }

    .right-bottomBox2 {
      width: 98%;
      height: 20%;
      //background-color: #2B5B9B;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;

      .rightbox2-1 {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;

        //background-color: blueviolet;
        .btn1 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #065D70);
          border: 2px solid #108B8F;
          border-radius: 4px;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          margin-left: 32px;
          margin-right: 32px;
        }

        .btn3 {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #337F17);
          border: 2px solid #3CA813;
          border-radius: 4px;
          font-size: 12px;
          //margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

    }
  }

  //一键返航
  .center-box2-3 {
    width: 98%;
    height: 40%;
    background: #011137 !important;
    border: 1px solid #2A2E4A;
    border-top: none;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .right-bottomTitle {
      width: 98%;
      height: 20%;
      margin-top: 1%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      //background-color: #00FF00;

      >p {
        width: 95px;
        height: 22px;
        font-size: 15px;
        margin-left: 30px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;

      }

      span {
        display: block;
        width: 50px;
        height: 2px;
        //margin-left: 0.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox {
      width: 50%;
      height: 30%;
      display: flex;
      justify-content: center;
      align-items: flex-end;

      //background-color: #0264bf;
      .btn {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        //margin-left: -5px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }
  }

}


//右边
.video-right {
  width: 53%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .right-header {
    width: 98%;
    height: 65px;
    margin-bottom: 8px;
    border: 1px solid #2A2E4A;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #081a46;

    p {
      width: 148px;
      height: 25px;
      line-height: 25px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #E9E9E9;
    }
  }

  .videoBox {
    width: 98%;
    height: 96.5%;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;
    border: 1px solid #27306b;
    border-radius: 4px;
    background: #011137 !important;

    .videobox1 {
      width: 99.9%;
      height: 50%;
      //display: flex;
      margin-bottom: 0.5%;

      .box {
        width: 100%;
        height: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000000;
        border: 1px solid #00FF00;
        background-image: url(../../components/images/jiankong.png);
        background-repeat: no-repeat;
        background-position: center center;
      }

      .video-js {
        background-color: rgb(1 5 43);
        object-fit: fill;
        //隐藏video播放按钮
      }

      video {
        pointer-events: none;
      }

      //隐藏video播放按钮
      video::-webkit-media-controls-play-button {
        display: none !important;
      }

      //隐藏video音量进度条
      video::-webkit-media-controls-volume-slider {
        display: none !important;
      }

      //隐藏video音量按钮
      video::-webkit-media-controls-mute-button {
        display: none !important;
      }

      video::-webkit-media-controls-toggle-closed-captions-button {
        display: none !important;
      }

      //隐藏当前时间
      video::-webkit-media-controls-current-time-display {
        display: none !important;
      }

      //隐藏剩余时间
      video::-webkit-media-controls-time-remaining-display {
        display: none !important;
      }

      //隐藏进度条
      video::-webkit-media-controls-timeline {
        display: none !important;
      }

      //更多选项
      video::-internal-media-controls-overflow-button {
        display: none !important;
      }
    }

    .videobox2 {
      width: 100%;
      height: 20%;
      //background-color: #108B8F;
      .dzdt{
        width: 10%;
        height: 15%;
        //background-color: #8aecf0;

        p {
          font-size: 15px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
          margin-left: 5%;
        }

        span {
          display: block;
          margin-left: 4.5%;
          width: 20px;
          height: 2px;
          background: #4691FF;
        }
      }
      .Trd-map{
        width: 95%;
        height: 85%;
        //background-color: burlywood;
      }
      .Trd-map1 {
        width: 95%;
        height: 85%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #5DCBFF;
        font-size: 20px;
        letter-spacing: 2px;
      }
      //抽屉按钮
      .rightBtn{
        font-size: 26px;
        z-index: 1000;

        ::v-deep .el-button--mini.is-round{
          font-size: 35px !important;
        }
      }
    }

    .videobox3 {
      width: 100%;
      height: 30%;
      display: flex;
      //flex-direction: column;
      //align-items: center;
      //margin-top: 2%;
      border-top: 1px solid #262E63;
      //background-color: #00FF00;

      //云台
      .ytkz{
        width: 50%;
        margin-top: 1%;

        .videobox3-1 {
          width: 100%;
          height: 10%;
          //background-color: #108B8F;

          p {
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #EDEDED;
            margin-left: 2%;
          }

          span {
            display: block;
            margin-left: 2.5%;
            width: 20px;
            height: 2px;
            background: #4691FF;
          }
        }

        .videobox3-2 {
          width: 100%;
          height: 90%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          //margin-top: 1%;
          //background-color: #0051ff;

          .ptz {
            position: relative;
            width: 244px;
            /* padding: 10px; */
            height: 200px;
            //background-color: aquamarine;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .circle-left {
            width: 73px;
            height: 146px;
            /* border: 1px solid #fff; */
            border-radius: 0px 73px 73px 0px;
            position: absolute;
            right: 0;
            transform-origin: 0 50%;
          }

          .circle-right {
            width: 73px;
            height: 146px;
            /* border: 1px solid #fff; */
            border-radius: 73px 0px 0px 73px;
            position: absolute;
            right: 0;
            transform-origin: 100% 50%;
          }

          /* 八等份分割线 */
          #Canvas {
            position: absolute;
            z-index: 1;
            pointer-events: none;
            left: 87px;
            top: 27px;
            transform: rotate(-22.5deg);
          }

          /* 外圆环 */
          #round {
            width: 160px;
            height: 160px;
            background-color: #011137;
            border-radius: 50%;
            position: absolute;
            left: 40px;
            top: 16px;
            z-index: 0;
          }

          /* 黑色内圆环 */
          #center_black {
            width: 74px;
            height: 74px;
            background-color: #011137;
            border-radius: 50%;
            position: absolute;
            left: 83px;
            top: 63px;
            z-index: 1;
          }

          /* 中心蓝色圆环 */
          #center_blue {
            width: 60px;
            height: 60px;
            text-align: center;
            background: linear-gradient(68deg, #3040F4, #3F79F4);
            border-radius: 50%;
            position: absolute;
            left: 90px;
            top: 70px;
            z-index: 2;
          }

          #center_blue span {
            position: absolute;
            left: 17px;
            top: 22px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          /* 圆八等份 */
          #circle0 {
            width: 146px;
            height: 146px;
            border-radius: 73px;
            top: 0px;
            background-color: #0f2140;
            position: absolute;
            left: 47px;
            top: 27px;
            z-index: 0;
            pointer-events: auto;
            transform: rotate(-22.5deg);
          }

          #left {
            /* 用矩形切割半圆 */
            clip: rect(0px 73px 146px 0px);
            position: absolute;
            right: 0px;
            width: 73px;
            height: 146px;
            overflow: hidden;
            border-left: 2px solid #011137;
          }

          #right {
            clip: rect(0px 78px 146px 0px);
            position: absolute;
            left: 0px;
            width: 73px;
            height: 146px;
            overflow: hidden;
            //border-right: 2px solid #011137;
          }

          #circle2:hover,
          #circle3:hover,
          #circle4:hover,
          #circle5:hover,
          #circle6:hover,
          #circle7:hover,
          #circle8:hover,
          #circle9:hover,
          #center_blue:hover {
            cursor: pointer;
          }

          #circle2 {
            background-color: #0a2056;
            //border-left: 2px solid #011137;
          }

          #circle2 span {
            position: absolute;
            left: 14px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle3 {
            background-color: #0a2056;
            transform: rotate(45deg);
            border-left: 2px solid #011137;
          }

          #circle3 span {
            position: absolute;
            left: 10px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle4 {
            background-color: #0a2056;
            transform: rotate(90deg);
            border-left: 2px solid #011137;
          }

          #circle4 span {
            position: absolute;
            left: 15px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle5 {
            background-color: #0a2056;
            transform: rotate(135deg);
            border-left: 2px solid #011137;
          }

          #circle5 span {
            position: absolute;
            left: 12px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle6 {
            background-color: #0a2056;
            transform: rotate(225deg);
            border-right: 2px solid #011137;
          }

          #circle6 span {
            position: absolute;
            right: 14px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle7 {
            background-color: #0a2056;
            transform: rotate(270deg);
            border-right: 2px solid #011137;
          }

          #circle7 span {
            position: absolute;
            right: 10px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle8 {
            background-color: #0a2056;
            transform: rotate(315deg);
            border-right: 2px solid #011137;
          }

          #circle8 span {
            position: absolute;
            right: 15px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle9 {
            background-color: #0a2056;
            transform: rotate(360deg);
          }

          #circle9 span {
            position: absolute;
            right: 10px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          .videobox3-3 {
            width: 40%;
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 1%;
            // margin-left: -20%;
            justify-content: space-around;

            //background-color: #00FF00;
            .videobox3-3-1 {
              width: 90%;
              display: flex;
              justify-content: space-around;
              align-items: center;

              .btn1 {
                width: 32px;
                height: 32px;
                background: linear-gradient(68deg, #3040F4, #3F79F4);
                border-radius: 50%;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                cursor: pointer;
                margin-bottom: 4px;
              }

              p {
                width: 26px;
                height: 18px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-bottom: 4px;
              }

              .btn2 {
                width: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 32px;
                background: linear-gradient(68deg, #3040F4, #3F79F4);
                border-radius: 50%;
                border: none;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                cursor: pointer;
                margin-bottom: 4px;
              }
            }
          }
        }
      }
      //音频视频控制
      .ypkz{
        width: 50%;
        margin-top: 1%;
        //background-color:hotpink;
        .yspkz{
          width: 95%;
          height: 10%;
          margin-left: 5%;
          //margin-bottom: 2%;
          //background-color: #00FF00;
          p {
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #EDEDED;
            margin-left: 3%;
          }

          span {
            display: block;
            margin-left: 3.5%;
            width: 52px;
            height: 2px;
            background: #4691FF;
          }
        }
        .btnBox{
          width: 100%;
          height: 90%;
          display: flex;
          //background-color: #54619D;

          .btnBox1{
            width: 36%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // background-color: #00FF00;

            .btn {
              width: 60px;
              height: 25px;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            >P {
              width: 60px;
              height: 25px;
              margin-top: 20%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #0F1A43;
              border: 2px solid #54619D;
              border-radius: 10px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #C1C1C1;
            }
          }
          .btnBox2{
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            //background-color: #00FF00;
            .btn1 {
              width: 60px;
              height: 25px;
              //margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #4C0820, #0D1538);
              border: 2px solid #942028;
              border-radius: 4px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              /*margin-bottom: 5%;*/
            }

            .btn2 {
              width: 60px;
              height: 25px;
              margin-top: 20%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }

            .btn3 {
              width: 60px;
              height: 25px;
              // margin-top: 27%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
              margin-bottom: 5%;
            }
          }
          .btnBox3{
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // background-color: #0051ff;

            .btn1 {
              width: 60px;
              height: 25px;
              //margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }

            .btn2 {
              width: 60px;
              height: 25px;
              margin-top: 20%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #673B1B);
              border: 2px solid #9B6D2B;
              border-radius: 4px;
            }
          }
          .btnBox4{
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // background-color: #0051ff;

            .btn1 {
              width: 60px;
              height: 25px;
              //margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }

            .btn2 {
              width: 60px;
              height: 25px;
              margin-top: 20%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #673B1B);
              border: 2px solid #9B6D2B;
              border-radius: 4px;
            }
          }
        }
      }

    }

  }

  //右边抽屉
  .rightDrawer{
    display: flex;
    justify-content: center;
    align-items: center;
    ::v-deep .el-drawer__body{
      display: flex;
      flex-direction: column;
      //justify-content: center;
      align-items: center;
      background: #0E2356;

      .put {
        width: 94%;
        margin: 10px;

        ::v-deep .el-input {
          width: 98%;
          height: 20px;
        }

        ::v-deep .el-input__inner {
          border: 2px solid #0264bf;
          background-color: #081a46;
          // margin: 10px;
        }
      }

      .table {
        width: 94%;
        height: 200px;
        margin: 10px;
        // margin-top: 20px;
        overflow: auto;

        ::v-deep .el-table__body-wrapper {
          &::-webkit-scrollbar {
            // 整个滚动条
            width: 0px; // 纵向滚动条的宽度
            background: rgba(71, 103, 182, 0.3);
            border: none;
          }

          &::-webkit-scrollbar-track {
            // 滚动条轨道
            border: none;
          }
        }

        .el-table {
          width: 100%;

        }

        ::v-deep .el-table th.gutter {
          display: none;
          width: 0
        }

        ::v-deep .el-table colgroup col[name='gutter'] {
          display: none;
          width: 0;
        }

        // ::deep .el-table::before {
        //     height: 0px;
        // }

        ::v-deep .el-table__body {
          width: 100%;
          // padding-left: 10px;
        }

        ::v-deep .el-table__body-wrapper {
          width: 100%;
          background-color: #081a46;
        }

        /*滚动条的宽度*/
        .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
          display: none;
          width: 0;
        }

        .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
          display: block;
          width: 0;
        }

        ::v-deep .el-table tr {
          background-color: transparent;
          border: none;
          // height: 50px;
          width: 100%;
          background-color: #081a46;
        }

        ::v-deep .el-table td {
          background-color: trannt;
          border: none;
          width: 100%;
          // height: 50px;
          background-color: #081a46;
        }

        // /* 表格内背景颜色 */
        ::v-deep .el-table th {
          background-color: transparent;
          border: none;
          width: 100%;
        }

        // 移入变色
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
          background-color: #222448;
        }
      }

      ::v-deep.el-progress-bar__inner {
        background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
      }

      .table::-webkit-scrollbar {
        display: none;
        /*隐藏滚动条*/
      }
    }

  }

}
</style>
